<html>

<head>
    <title>BusTub Shell</title>
    <!-- jQuery -->
    <script src="https://unpkg.com/jquery@3.x.x/dist/jquery.min.js"></script>
    <!-- jQuery Terminal -->
    <script src="https://unpkg.com/jquery.terminal@2.x.x/js/jquery.terminal.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/jquery.terminal@2.x.x/css/jquery.terminal.min.css" />
    <!-- prismjs  -->
    <link rel="stylesheet" href="https://unpkg.com/prismjs@1.x.x/themes/prism.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/terminal-prism@0.3.x/css/prism.css" />
    <script src="https://unpkg.com/prismjs@1.x.x/prism.js"></script>
    <script src="https://unpkg.com/prismjs@1.x.x/components/prism-sql.min.js"></script>
    <script src="https://unpkg.com/jquery.terminal@2.x.x/js/prism.js"></script>
    <!-- CJK characters -->
    <script src="https://cdn.jsdelivr.net/gh/jcubic/static/js/wcwidth.js"></script>
    <!-- Roboto Mono -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet">
    <!-- Preview -->
    <meta property="og:site_name" content="CMU 15-445/645" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="BusTub SQL Database Shell " />
    <meta property="og:url" content="https://15445.courses.cs.cmu.edu" />
    <meta property="og:description" content="Interactive BusTub shell right in your browser!" />
    <meta property="og:image" content="https://15445.courses.cs.cmu.edu/fall2022/images/bustub-shell.png" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@CMUDB">
    <meta name="twitter:creator" content="@CMUDB">
    <meta name="twitter:domain" content=".">
    <meta property="twitter:label1" content="Semester?" />
    <meta property="twitter:data1" content="Fall 2022" />
    <meta property="twitter:label1" content="Relational?" />
    <meta property="twitter:data1" content="Hell Yes" />
</head>

<body>
</body>

<style>
    .terminal {
        --color: black;
        --background: white;
        --link-color: darkblue;
        --size: 1.2;
        --font: "Source Code Pro", monospace;
    }

    .terminal::after {
        content: "";
        background-image: url("bustub.svg");
        opacity: 0.02;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        position: absolute;
        z-index: -1;
        transform: rotate(-30deg);
    }

    table,
    tr,
    td,
    tbody,
    thead,
    div {
        font-size: calc(var(--size, 1)*(12px/var(--pixel-density, 1)));
        white-space: pre;
    }
</style>

<script src="bustub-wasm-shell.js"></script>

<script type="text/javascript">
    const BUSTUB_PUBLIC_VERSION_VAR = "${BUSTUB_PUBLIC_VERSION}"
    const BUSTUB_PRIVATE_VERSION_VAR = "${BUSTUB_PRIVATE_VERSION}"
    const BUSTUB_BUILD_TIME_VAR = "${BUSTUB_BUILD_TIME}"
    let is_ready = false

    Module['onRuntimeInitialized'] = function () {
        const executeQuery = Module.cwrap('BustubExecuteQuery', 'number', ['string', 'number', 'number'])
        const initialize = Module.cwrap('BustubInit', 'number', [])
        window.executeQuery = (x) => {
            const bufferSize = 64 * 1024
            let output = "\0".repeat(bufferSize)
            let ptrOutput = Module.allocateUTF8(output)
            const retCode = executeQuery(x, ptrOutput, bufferSize)
            output = Module.UTF8ToString(ptrOutput)
            Module._free(ptrOutput)
            return [retCode, output]
        }
        initialize()
        is_ready = true
    }

    $(document).ready(() => {
        $.terminal.syntax('sql')
        $.terminal.prism_formatters = {
            prompt: false,
            echo: false,
            animation: false,
            command: true
        }
        let line = ""
        var term = $('body').terminal(function (command) {
            if (!is_ready) {
                this.echo("BusTub shell is still initializing, please wait.")
                return
            }
            line += command
            if (line.endsWith(';') || line.startsWith("\\")) {
                if (line == "\\clear") {
                    this.clear()
                } else {
                    const [retCode, result] = executeQuery(line)
                    this.echo(result, { raw: true })
                    if (retCode == 1) {
                        this.echo("Table truncated due to output limit.")
                    }
                    this.echo()
                }
                line = ""
            }
        }, {
            greetings: `[[@;;;;bustub.svg]]`,
            prompt: () => line.length == 0 ? "[[b;;]bustub> ]" : "[[b;;]... ]"
        })
        term.echo(`<hr><h1>Live Database Shell</h1>`, { raw: true })

        term.echo(`
[[b;;]Solution Version:] ${BUSTUB_PRIVATE_VERSION_VAR} · [[b;;]BusTub Version:] ${BUSTUB_PUBLIC_VERSION_VAR} · [[b;;]Built Date:] ${BUSTUB_BUILD_TIME_VAR}

BusTub is a relational database management system built at Carnegie Mellon University for the Introduction to Database Systems (15-445/645) course. This system was developed for educational purposes and should not be used in production environments. &#91;[[!;;;;https://github.com/cmu-db/bustub]BusTub on GitHub]&#93; &#91;[[!;;;;https://15445.courses.cs.cmu.edu/]Course Website]&#93; &#91;[[!;;;;https://github.com/cmu-db/bustub/issues/new]Report Bugs]&#93;

Use \\help to learn about the usage. Use \\clear to clear the page.

This is BusTub reference solution running in your browser.
`)
    })
</script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-52525161-8"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-52525161-8');
</script>

</html>